<template>
    <div class="editor-header">
        <div class="super-editor-button-box" @click="handleClick" v-show="buttonShow">
            <el-icon>
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="super-editor-title">{{ title }}</div>
    </div>
    <div class="dataset-info-container">

        <div class="dataset-header">
            <!-- <div class="dataset-header-title"> -->
            <img src="http://localhost:8001/upload/car.webp" alt="">
            <div class="dataset-box">
                <div class="dataset-name">{{ dataset.name }}</div>
                <div class="dataset-info">
                    <div class="dataset-user">{{ dataset.username }}</div>
                    <div class="dataset-created">{{ dataset.created }}</div>
                    <div>10000次</div>
                    <div>实时更新</div>
                </div>
                <div class="dataset-describe">{{ dataset.describe }}</div>
                <div class="action">
                    <!-- <el-button type="primary">订阅 50/月</el-button> -->
                    <div v-if="inMartket">
                        
                        <el-button type="primary" color="#222222" v-if="isThisDatasetSubcribe">已订阅</el-button>
                        <el-button type="primary" color="#222222" @click="addSubscribe(dataset.id)" v-else>订阅</el-button>
                        <el-button type="primary" @click="addConfig" color="#222222"
                            v-if="isThisDatasetSubcribe">配置</el-button>
                    </div>
                    <div v-else>
                        
                        <el-button type="primary" color="#222222" @click="cancelSubscribe">取消订阅</el-button>
                        <el-button type="primary" @click="addConfig" color="#222222">配置</el-button>
                    </div>

                    <!-- <el-button type="primary">下载到本地</el-button> -->
                    <!-- <el-button type="primary">自定义爬虫</el-button> -->
                    <!-- <el-button type="primary">对话</el-button> -->
                </div>
            </div>

            <!-- </div> -->



        </div>

        <div class="dataset-detail">
            <DataTable :dataset="dataset.id" :configure="false" />

            <!-- <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="详情" name="first">
                    1、每条数据上面都自定义了标签。这样，用户可以根据标签或者关键词来筛选数据。方便用户定义自己的数据集合。
                    <br>
                    2、用户也可以在筛选规则上面添加自定义的关键词。
                    <br>
                    3、也可以让AI总结一下每一篇文章，筛选对应的数据
                    <br>
                    4、数据类型需要支持pdf、excel、word等等
                </el-tab-pane>
                <el-tab-pane label="数据预览" name="second">
                    1、表格数据
                    <br>
                    2、有链接的可以跳转？
                    <br>
                    3、数据对应的标签
                        <DataTable/>
                </el-tab-pane>
                <el-tab-pane label="评论" name="third">
                    1、数据质量真不错，3颗星
                    <br>
                    2、数据质量真不错，3颗星
                </el-tab-pane>

            </el-tabs> -->
        </div>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { emitter } from '@/global.js'
import { cancelMySubscribe, addMySubscribe, getSubscribeByDataset } from '@/api/dataset'
import { ElMessage } from 'element-plus';
import DataTable from './DataTable.vue';

const dataset = ref({ name: '', username: '', created: '', describe: '' })
const title = ref('我的订阅')

const inMartket = ref(false)
const isThisDatasetSubcribe = ref(false)
emitter.on('clickMarketDataset', (data) => {
    title.value = '市场'
    dataset.value = data
    inMartket.value = true
    // console.log(data, '我的dataset');
    getSubscribeByDataset(dataset.value.id).then(result => {
        console.log(result, '我的订阅');
        if (result.length > 0) {
            isThisDatasetSubcribe.value = true
        } else {
            isThisDatasetSubcribe.value = false
        }
    })
})

const currentSubscribe = ref({})
emitter.on('clickSubscribe', (subscribe) => {
    title.value = '我的订阅'
    dataset.value = subscribe.dataset
    currentSubscribe.value = subscribe
    inMartket.value = false

})

const cancelSubscribe = () => {
    console.log(currentSubscribe.value);
    cancelMySubscribe(currentSubscribe.value.id).then(result => {
        // console.log(result,'取消订阅');
        ElMessage.success('取消订阅成功')
        emitter.emit('cancelSubscribe', currentSubscribe.value)
    })

}

const addSubscribe = (datasetId) => {
    addMySubscribe(datasetId).then(result => {
        if (result.success) {
            ElMessage.success('订阅成功')
            console.log(result, '添加订阅');
            getSubscribeByDataset(datasetId).then(result => {
                // console.log(result, '我的订阅');
                if (result.length > 0) {
                    isThisDatasetSubcribe.value = true
                } else {
                    isThisDatasetSubcribe.value = false
                }
            })
        } else {
            ElMessage.error('订阅失败')
        }

    })
}

const userAction = inject('userAction')
const addConfig = () => {
    emitter.emit('addConfig', currentSubscribe.value)
    userAction('config')
}

const buttonShow = ref(false)

const activeName = ref('second')

const handleClick = (tab, event) => {
    console.log(tab, event)
    console.log(activeName.value);
}


</script>

<style scoped>
.editor-header {
    height: var(--supereditor-header-height);
    line-height: var(--supereditor-header-height);
    display: flex;
    align-items: center;
    padding-left: 5px;
    gap: 10px;
    font-size: large;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.super-editor-title {
    padding-left: 5px;
}

.dataset-info-container {
    padding: 0 20px;
}

.dataset-header {
    display: flex;
    margin-bottom: 10px;
    background: #fff;
}

.dataset-box>:nth-child(n) {
    padding-bottom: 5px;
}

.dataset-name {
    font-size: 26px;
}

.dataset-info {
    display: flex;
}

.dataset-info>:nth-child(n) {
    padding-right: 10px;
    font-size: 14px;
}

.dataset-detail {
    background-color: #fff;
}
</style>

